<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>领养宠物 - 宠物管理系统</title>
    <style>
        /* General CSS styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3e9e9;
            /* 浅粉色背景 */
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
            /* 居中对齐标题内容 */
        }

        header nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            text-align: center;
            /* 居中对齐导航链接 */
        }

        header nav ul li {
            display: inline;
            margin-right: 20px;
        }

        header nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
            /* 导航链接的内边距 */
            border-radius: 5px;
            /* 圆角 */
            transition: background-color 0.3s ease;
            /* 背景颜色平滑过渡 */
        }

        header nav ul li a:hover {
            background-color: #fcc;
            /* 鼠标悬停时的浅粉色背景 */
        }

        main {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh;
            /* 使用最小高度以确保页面内容显示完整 */
            flex-wrap: wrap;
            /* 换行布局 */
        }

        .pet-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            padding: 20px;
            margin: 20px;
            text-align: center;
        }

        .pet-image {
            max-width: 100%;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .pet-name {
            font-size: 20px;
            font-weight: bold;
            color: #0a583c;
        }

        .pet-info {
            text-align: left;
            margin-bottom: 10px;
        }

        .pet-info p {
            margin: 5px 0;
        }

        .adopt-btn {
            display: inline-block;
            background-color: #0a583c;
            color: #fff;
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .adopt-btn:hover {
            background-color: #0a482c;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">系统首页</a></li>
                <li><a href="/kind">宠物种类知识</a></li>
                <li><a href="/adopt">领养宠物页面</a></li>
                <li><a href="/Adoption">送养宠物页面</a></li>
                <li><a href="/Blogger">宠物博客交流中心</a></li>
                <li><a href="/PersonalCenter">个人中心</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="pet-card">
            <img src="../static/images/g1.jpg" alt="Pet 1" class="pet-image">
            <div class="pet-name">小白</div>
            <div class="pet-info">
                <p>性别: 公</p>
                <p>年龄: 2个月</p>
                <p>性格: 温顺可爱，喜欢被抚摸</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>
        <div class="pet-card">
            <img src="../static/images/m1.jpg" alt="Pet 2" class="pet-image">
            <div class="pet-name">奥利奥</div>
            <div class="pet-info">
                <p>性别: 母</p>
                <p>年龄: 3个月</p>
                <p>性格: 活泼好动，喜欢玩球</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>
        <div class="pet-card">
            <img src="../static/images/g2.jpg" alt="Pet 2" class="pet-image">
            <div class="pet-name">红包</div>
            <div class="pet-info">
                <p>性别: 母</p>
                <p>年龄: 3个月</p>
                <p>性格: 活泼好动，喜欢玩球</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>
        <div class="pet-card">
            <img src="../static/images/g3.jpg" alt="Pet 2" class="pet-image">
            <div class="pet-name">利知</div>
            <div class="pet-info">
                <p>性别: 母</p>
                <p>年龄: 3个月</p>
                <p>性格: 活泼好动，喜欢玩球</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>
        <div class="pet-card">
            <img src="../static/images/g4.jpg" alt="Pet 2" class="pet-image">
            <div class="pet-name">利是</div>
            <div class="pet-info">
                <p>性别: 母</p>
                <p>年龄: 3个月</p>
                <p>性格: 活泼好动，喜欢玩球</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>
        <div class="pet-card">
            <img src="../static/images/g5.jpg" alt="Pet 2" class="pet-image">
            <div class="pet-name">壮壮</div>
            <div class="pet-info">
                <p>性别: 母</p>
                <p>年龄: 3个月</p>
                <p>性格: 活泼好动，喜欢玩球</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>
        <div class="pet-card">
            <img src="../static/images/g6.jpg" alt="Pet 2" class="pet-image">
            <div class="pet-name">小狼</div>
            <div class="pet-info">
                <p>性别: 母</p>
                <p>年龄: 3个月</p>
                <p>性格: 活泼好动，喜欢玩球</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>
        <div class="pet-card">
            <img src="../static/images/g7.jpg" alt="Pet 2" class="pet-image">
            <div class="pet-name">闺蜜</div>
            <div class="pet-info">
                <p>性别: 母</p>
                <p>年龄: 3个月</p>
                <p>性格: 活泼好动，喜欢玩球</p>
            </div>
            <a href="#" class="adopt-btn">立即咨询</a>
        </div>

        <!-- 可以继续添加更多宠物卡片 -->
    </main>
    <footer>
        <!-- 页脚内容 -->
    </footer>
    <script>
        // JavaScript for navigation redirection
        document.addEventListener("DOMContentLoaded", function () {
            var links = document.querySelectorAll("header nav ul li a");
            links.forEach(function (link) {
                link.addEventListener("click", function (event) {
                    event.preventDefault();
                    var targetPage = this.getAttribute("href");
                    window.location.href = targetPage;
                });
            });
        });
    </script>
</body>

</html>